<script setup lang="ts"></script>

<template>
  <div class="container">
    <div class="header">
      <!-- 占位 名字是header -->
      <slot name="header"></slot>
    </div>
    <div class="body">
      <slot></slot>
      <!-- 挖坑 -->
      <slot name="body">
        <!-- 默认内容 当没有内容传入的时候生效  -->
        <h1>我是默认的</h1>
      </slot>
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<style scoped>
.header,
.body,
.footer {
  width: 100%;
  height: 200px;
  background-color: aquamarine;
}

.body {
  height: 600px;
  background-color: blueviolet;
  /* overflow: hidden; */
  overflow-y: auto;
}
</style>
